<template>
  <div class="node-wrap" :class="[props.properties?.status, 'base', getClassName(), props.properties?.executeStatus]">
    <div class="node-title" @mousedown="handleMousedown" @mouseup="handleMouseup">
      <span class="node-icon">
        <img :src="getLogo()" alt="" />
      </span>
      <span class="node-name">{{ getName() }}</span>
    </div>
    <div
      class="node-warning"
      v-show="props.properties?.warnings && props.properties?.warnings.length"
    >
      <a-popover class="item" placement="right" width="auto" :offset="-10" trigger="click" popper-class="logic-pop">
        <abstract-content
          :title="'配置异常'"
          :content="props.properties?.warnings"
          :showButton="false"
        ></abstract-content>
        <div class="warning-tip">请及时调整，以免运行错误！</div>
        <slot name = "reference" >
          <span class="icon" @mousedown.stop>
            <i class="el-icon-warning"></i>
          </span>
        </slot>
      </a-popover>
    </div>
    <div
      class="node-option"
      v-show="(props.properties?.status === 'selected' || props.properties?.status === 'hovered') && !disabled"
      @mousedown.capture="selectNode"
    >
      <a-tooltip class="item" effect="dark" content="复制节点" placement="top" popper-class="logic-tooltip-pop">
        <span class="option-icon" @click="copyNode" @mousedown.stop>
          <img src="https://s3-gzpu.didistatic.com/tiyan-base-store/suda/organizer/icons/node_copy.png" />
        </span>
      </a-tooltip>
      <a-tooltip class="item" effect="dark" content="信息概览" placement="top" popper-class="logic-tooltip-pop">
        <el-popover placement="right" width="188" :offset="-10" trigger="click" popper-class="logic-pop">
          <abstract-content
            :title="getAbstract().title"
            :content="getAbstract().content"
            :showButton="getAbstract().showButton"
            @config="goConfig()"
          ></abstract-content>
          <span class="option-icon" slot="reference" @mousedown.stop>
            <img src="https://s3-gzpu.didistatic.com/tiyan-base-store/suda/organizer/icons/node_abstract.png" />
          </span>
        </el-popover>
      </a-tooltip>
      <a-tooltip class="item" effect="dark" content="删除节点" placement="top" popper-class="logic-tooltip-pop">
        <Popconfirm 
        hide-icon
          class="item"
          title="确认删除该节点吗？"
          placement="top"
          width="180"
          cancel-button-type=""
          @confirm="deleteNode"
          popper-class="logic-pop">
          <slot name = "reference" >
            <span class="option-icon" @mousedown.stop>
              <img src="https://s3-gzpu.didistatic.com/tiyan-base-store/suda/organizer/icons/node_delete.png" />
            </span>
          </slot>
        </Popconfirm>
      </a-tooltip>
    </div>
    <div class="node-next">
      <span v-show="props.properties?.status === 'selected' || props.properties?.status === 'hovered'" @mousedown.stop="handleNext">
        <i class="el-icon-circle-plus next-icon"></i>
      </span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, Ref, ref, unref, defineProps, watch, defineExpose, defineEmits } from 'vue';
import { defaultLogo } from '../util/typeMap'
import abstractContent from '../tool/abstractContent/index.vue'

const showAddPop: Ref = ref(false);
let mouseStartTime: any = null;

// 定义组件接收的参数
const props = defineProps({
  model: Object,
  graphModel: Object,
  isSelected: Boolean,
  isHovered: Boolean,
  disabled: Boolean,
  properties: Object
});

watch(
  () => props.isHovered,
  (nv) => {
    console.log('nv --->>>', nv);
    if (nv) {
      enterNode()
    } else {
      leaveNode()
    }
  },
  {
    deep: true,
  }
);

const getAbstract = () => {
  return (props.model?.getNodeAbstract && props.model.getNodeAbstract()) || {}
};

const getName = () => {
  return (props.model?.getNodeName && props.model.getNodeName()) || '未知'
};

const getLogo = () => {
  return (props.model?.getNodeLogo && props.model.getNodeLogo()) || defaultLogo
};
const getClassName = () => {
  return (props.model?.getNodeClassName && props.model.getNodeClassName()) || ''
};
const getWarning = () => {
  return (props.model?.getNodeWarning && props.model.getNodeWarning()) || {}
};
const handleNext = () => {
  console.log('this.graphModel --->>>', props.graphModel)
  const nodeX = props.model?.x
  const nodeY = props.model?.y
  const x = nodeX + props.model?.width / 2
  const y = nodeY
  props.graphModel?.popover.show({
    type: 'tip1',
    key: props.model?.id,
    delay: 100,
    placement: 'right',
    trigger: 'click',
    width: 16,
    height: 16,
    x,
    y,
    props: {
      showConnectBlock: true
    }
  })
  selectNode()
};
const handleMousedown = () => {
  mouseStartTime = new Date().getTime()
};
const handleMouseup = () => {
  const mousedownDuration = new Date().getTime() - mouseStartTime
  // 非拖拽才显示抽屉
  if (mousedownDuration < 1000) {
    setTimeout(() => {
      props.graphModel?.eventCenter.emit(`node:select-click`, props.model)
    }, 100)
  }
};
const selectNode = () => {
  props.graphModel?.eventCenter.emit(`node:update-model`, props.model)
};
const enterNode = () => {
  console.log('this.model --->>', props.model)
  console.log('this.properties --->>', props.properties)
  if (props.model?.properties && props.model.properties.status === 'selected') return
  props.model?.setProperties({
    status: 'hovered'
  })
};
const leaveNode = () => {
  if (props.model?.properties && props.model.properties.status === 'selected') return
  props.model?.setProperties({
    status: 'normal'
  })
};
const copyNode = () => {
  props.graphModel?.eventCenter.emit(`node:copy-node`, props.model)
};
const deleteNode = () => {
  props.graphModel?.eventCenter.emit(`node:delete-node`, props.model)
};
const goConfig = () => {
  props.graphModel?.eventCenter.emit(`node:select-click`, props.model)
};

</script>
<style scoped lang="less">
.base {
  --node-primary-color: #2961ef;
}
.event {
  --node-primary-color: #683ced;
}
.common {
  --node-primary-color: #26c9f2;
}
.node-wrap {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  cursor: move;
  user-select: none;
  // transition: 0.3 all ease;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #1f3252;
  line-height: 16px;
  font-weight: 400;
  // overflow: hidden;
  &.hovered {
    .node-title {
      background: rgba(41, 97, 239, 0.08);
      border: 1px solid var(--node-primary-color);
    }
  }
  &.selected {
    .node-title {
      border: 2px solid var(--node-primary-color);
      box-shadow: 0 0 6px 0 rgba(41, 97, 239, 0.5);
    }
  }
  &.execute-failed {
    .node-title {
      border: 2px solid rgba(255, 77, 79, 0.7);
      box-shadow: 0 0 6px 0 rgba(255, 77, 79, 0.5);
      background: rgba(255, 77, 79, 0.5);
    }
  }
}

.node-title {
  width: 100px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  width: 100%;
  border: 1px solid #bac1d0;
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
  .node-icon {
    display: inline-block;
    width: 26px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--node-primary-color);
  }
  img {
    width: 14px;
    height: 14px;
    filter: drop-shadow(#fff 100px 0);
    transform: translateX(-100px);
  }
}
.executed {
  .node-title {
    background: rgb(79 235 151 / 80%);
  }
}

.node-name {
  width: 90px;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 8px;
}

.option-icon {
  display: inline-block;
  margin-left: 4px;
  width: 14px;
  height: 14px;
  overflow: hidden;
  cursor: pointer;
  img {
    width: 100%;
    height: 100%;
  }
  &:hover,
  &:focus {
    img {
      filter: drop-shadow(var(--node-primary-color) 100px 0);
      transform: translateX(-100px);
    }
  }
}

.next-icon {
  color: #33dd89;
  font-size: 16px;
  cursor: pointer;
}

.node-option {
  display: flex;
  position: absolute;
  right: 0;
  top: calc(50% - 14px);
  transform: translateY(-100%);
  .item {
    cursor: pointer;
    height: 14px;
  }
}

.node-warning {
  display: flex;
  position: absolute;
  left: 0;
  top: calc(50% - 14px);
  transform: translateY(-100%);
  .item {
    cursor: pointer;
    height: 14px;
    color: orange;
    font-weight: bold;
    font-size: 12px;
  }
}

.warning-tip {
  font-size: 12px;
  color: #f00;
  margin-left: 4px;
}

.node-next {
  display: flex;
  position: absolute;
  left: 90px;
  top: 13px;
  width: 24px;
  height: 28px;
  align-items: center;
  span {
    width: 16px;
    height: 16px;
    background: #fff;
    margin-left: 13px;
    margin-right: 2px;
    display: flex;
    align-items: center;
  }
  .next-icon {
    width: 16px;
    height: 16px;
  }
}
</style>
